<template>
    <div class="tuiFei">
        <custom-dialog title="退费" size="small" @dialogClose="dialogTableClose">
            <div class="inInfoMain">
                <div class="left">
                    <div class="p33" style="width: 100%">
                        <label class="p33Label">退费金额：</label>
                        <el-button :type="moneyValue == '10' ? 'primary' : 'default'" @click="changeMoney(10)">10元</el-button>
                        <el-button :type="moneyValue == '20' ? 'primary' : 'default'" @click="changeMoney(20)">20元</el-button>
                        <el-button :type="moneyValue == '50' ? 'primary' : 'default'" @click="changeMoney(50)">50元</el-button>
                        <el-button :type="moneyValue == '100' ? 'primary' : 'default'" @click="changeMoney(100)">100元</el-button>
                    </div>

                    <div class="p33">
                        <label class="p33Label">退费金额：</label>
                        <el-input
                            size="medium"
                            placeholder="请输入"
                            type="number"
                            class="inputOrSelect"
                            v-model="jfje"
                            min="1"
                            max="1000"
                            @change="jfjeChange"
                        >
                            <label slot="suffix">元</label>
                        </el-input>
                    </div>
                    <!-- <div class="p33">
                            <label class="p33Label">退费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                    <!-- <div class="p33">
                        <label class="p33Label">退费金额：</label>
                        <el-input size="medium" min="1" max="1000" placeholder="请输入" type="number" class="inputOrSelect" v-model="tfje">
                            <label slot="suffix">元</label>
                        </el-input>
                    </div> -->
                    <!-- <div class="p33">
                            <label class="p33Label">退费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                    <!-- <div class="p33">
                            <label class="p33Label">联系方式：</label>
                            <span>{{ userInfo.user_tel ? userInfo.user_tel : '--' }}</span>
                        </div> -->
                    <!-- <div class="p33">
                            <label class="p33Label">费用类型：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                    <div class="p33">
                        <label class="p33Label">操作员：</label>
                        <span>{{ oprUserName }}</span>
                        <!-- <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect"> </el-input> -->
                    </div>
                    <div class="p66" style="width: 66%; clear: both; height: 60px">
                        <label class="p33Label p33Bz">备注：</label>
                        <el-input
                            size="medium"
                            placeholder="请输入"
                            type="textarea"
                            class="inputOrSelect"
                            v-model="bz"
                            style="width: 323px"
                        >
                        </el-input>
                    </div>
                    <div class="p33" style="margin-top: 16px">
                        <!-- :disabled="deviceInfo.is_open != '1'" -->
                        <el-button size="medium" style="padding: 10px" type="primary" @click="tfClick">立即退费</el-button>
                    </div>
                </div>
            </div>
        </custom-dialog>

        <tfMoney v-if="showJfMoeny" :jfje="jfje" :userInfo="userInfo" :oprUserName="oprUserName" @close="closeJf"></tfMoney>
    </div>
</template>

<script>
import customDialog from '@/components/customComponents/customDialog'
import tfMoney from '@/view/managementCenter/components/tfMoney'
import {AjaxCommon, getUser} from '@/libs/apiCommon'
export default {
    name: 'tuiFei',
    props: ['selectItem'],
    components: {
        customDialog,
        tfMoney
    },
    data() {
        return {
            jfje: '',
            bz: '',
            showJfMoeny: false,
            moneyValue: '',
            oprUserName: '',
            userInfo: {
                /** 账户GUID */
                ac_guid: '',
                /** 用户ID */
                user_id: '',
                /** ac_id账户ID */
                ac_id: '',
                /** 账户名称 */
                ac_name: '',
                /** 用户名称 */
                user_name: '',
                /** 邮箱 */
                user_email: '',
                /** 电话 */
                user_tel: '',
                /** 免费账户余额 */
                free_sum: '',
                /** 免费电余额 */
                free_e_sum: '',
                /** 免费水余额 */
                free_w_sum: '',
                /** 透支额度 */
                over_sum: '',
                /** 告警金额 */
                alarm_sum: '',
                /** 计算时间大于一个指定周期提示操作人要注意 */
                com_cycle_time: '',
                /** 自退费剩余金额 */
                self_sum: '',
                /** 账户类型（0：电表账户 1：水表账户 2:气表账户 3：电表水表混合 4：电表气表混合 5：水表气表混合 6：电表水表气表混合） */
                acType: '',
                acTypeName: '',
                /** 总剩余金额 */
                ac_sum: '',
                /** 账户使用类型（来至于数据字典，如学生宿舍、办公室、物业等 WYFZH为需缴纳物业费账户）  */
                w_acType: '',
                /** 单价（仅账户类型为0或1时有数据如电价、水价，混合账户无单价） */
                price: '',
                /** 是否物业欠费 默认为-1，当返回0时，点击充值时要提示未缴纳物业费 */
                w_isPay: '',
                /** 物业费金额 */
                wyf: ''
            }
        }
    },
    computed: {},
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            const selectItem = this.selectItem
            const user = getUser()
            this.oprUserName = user.realname
            if (selectItem.is_open == '1') {
                const res = await AjaxCommon(`/api/Payment/GetAccount/${selectItem.eq_guid}`, 'get', null)
                if (res) {
                    let data = res.data.Message?.[0] ?? {}
                    /** 账户类型（0：电表账户 1：水表账户 2:气表账户 3：电表水表混合 4：电表气表混合 5：水表气表混合 6：电表水表气表混合） */
                    if (typeof data?.acType != 'undefined') {
                        switch (data?.acType) {
                            case 0:
                                data.acTypeName = '电表账户'
                                break
                            case 1:
                                data.acTypeName = '水表账户'
                                break
                            case 2:
                                data.acTypeName = '气表账户'
                                break
                            case 3:
                                data.acTypeName = '电表水表混合'
                                break
                            case 4:
                                data.acTypeName = '电表气表混合'
                                break
                            case 5:
                                data.acTypeName = '水表气表混合'
                                break
                            case 6:
                                data.acTypeName = '电表水表气表混合'
                                break
                            default:
                                break
                        }
                    }
                    this.userInfo = data
                } else {
                    PopupCommon.notify('info', '暂无此账户信息')
                }
            }
        },
        async closeJf() {
            this.showJfMoeny = false
            this.dialogTableClose()
        },
        changeMoney(value) {
            this.moneyValue = value
            this.jfje = value
        },
        dialogTableClose() {
            this.$emit('onClose', '')
        },
        tfClick() {
            if (this.jfje == 0 || this.jfje == '') {
                PopupCommon.notify('info', '请输入退费金额')
                return
            }
            const self_sum = parseFloat(this.userInfo.self_sum ? this.userInfo.self_sum : 0)
            if (parseFloat(this.jfje) > self_sum) {
                PopupCommon.notify('info', '退费金额不能大于自缴费剩余金额：' + self_sum)
                return
            }
            this.showJfMoeny = true
        }
    }
}
</script>

<style lang="scss" scoped>
.inInfoMain {
    margin: 0 10px;
    display: flex;
}

.left {
    flex: 1;
    text-align: left;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.left {
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.left .p33 {
    width: 33%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}
.left .p66 {
    width: 66%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p33 .p33Label,
.left .p66 .p33Label {
    color: #666;
    font-size: 14px;
    min-width: 75px;
    display: inline-block;
    vertical-align: middle;
}

.p33Bz {
    line-height: 60px !important;
    text-align: right;
    padding-right: 7px;
}
.inputOrSelect {
    width: 120px;
}
</style>